<script setup>
import { useMessageStore } from '@/stores/message.js'
import { useCartStore } from '@/stores/cart.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useMessageStore()
function addMessage() {
  store.addCount()
}
const cartStore = useCartStore()
function addCart() {
  cartStore.setCartList(goodList)
  router.push('/cart')
}

const images = [
  'https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png',
  'https://img.alicdn.com/imgextra/i4/O1CN01LHWdyp1yvAidcNMDR_!!6000000006640-0-tps-846-472.jpg',
  'https://img.alicdn.com/imgextra/i2/O1CN01lFNk4Z1JDkviZe8EG_!!6000000000995-2-tps-846-472.png',
  'https://img.alicdn.com/imgextra/i2/O1CN01jH9w4F1sEDtCgpH3r_!!6000000005734-0-tps-846-472.jpg'
]
const goodList = ref([
  {
    num: 1,
    price: '42.00',
    title: '婴儿玩具0-1岁学爬行引导抬头练习训练益智早教3宝宝6月4电动爬娃',
    thumb:
      '//gw.alicdn.com/bao/uploaded/i1/2214843998/O1CN015PVina1fP8H4DQUl8_!!0-item_pic.jpg_300x300q90.jpg_.webp'
  },
  {
    num: 1,
    price: '144.00',
    title: '苏泊尔豆浆机家用免煮全自动小型破壁机榨汁多功能正品旗舰店官方',
    thumb:
      '//gw.alicdn.com/bao/uploaded/i4/2065839946/O1CN01tMg32v2NLK7YQupSZ_!!0-item_pic.jpg_300x300q90.jpg_.webp'
  },
  {
    num: 1,
    price: '86.00',
    title: '儿童赛车闯关大冒险游戏机玩具3岁6男女孩7模拟开小汽车5益智4三9',
    thumb:
      '//gw.alicdn.com/bao/uploaded/i4/2075560225/O1CN01qM2KzI1DX5s90thaH_!!0-item_pic.jpg_300x300q90.jpg_.webp'
  },
  {
    num: 1,
    price: '18.00',
    title: '花朵压圈郁金香垃圾桶大容量家用卫生桶客厅卧室厨房卫生间垃圾筐',
    thumb:
      '//gw.alicdn.com/bao/uploaded/i2/1047047576/O1CN01YAzPkq25prR7KMhZN_!!1047047576.jpg_300x300q90.jpg_.webp'
  }
])
</script>

<template>
  <p style="text-align: center">活动专场</p>
  <div class="main">
    <div class="swipe">
      <van-swipe :autoplay="2000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img style="height: 200px; width: 400px" :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <span>猜你喜欢</span>

    <van-row gutter="20" justify="center">
      <van-col span="22" v-for="(item, index) in goodList" :key="index"
        ><van-card :num="item.num" :price="item.price" :title="item.title" :thumb="item.thumb">
          <template #tags>
            <van-tag plain type="primary" style="font-size: small">送运费险</van-tag>
          </template>
          <template #footer>
            <van-stepper v-model="item.num" />
            <van-button size="small" @click="addCart">加购</van-button>
          </template>
        </van-card></van-col
      >
    </van-row>
    <div class="like">
      <van-button plain type="success" @click="addMessage" style="margin: 10px"
        >喜欢你就点个赞吧{{ store.count }}</van-button
      >
    </div>
  </div>
</template>

<style lang="less" scoped>
.main {
  width: 400px;
  height: 700px;
  overflow: scroll;

  m .swipe {
    width: 400px;
    height: 200px;
  }
  span {
    font-size: large;
    font-weight: 600;
  }
  .like {
    display: flex;
    justify-content: center;
  }
}
</style>
